<!DOCTYPE html><html><head>
      <title>js-ztree-table</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css">
      
      
      
      
      
      
      
      
      

      <style> 
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
 
      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview   ">
      <h1 class="mume-header" id="ztree-%E8%A1%A8%E6%A0%BC%E6%A0%91">ztree &#x8868;&#x683C;&#x6811;</h1>

<h3 class="mume-header" id="%E5%8E%9F%E7%90%86%E5%BE%88%E7%AE%80%E5%8D%95%E5%88%A9%E7%94%A8ztree%E7%9A%84adddiydom%E6%96%B9%E6%B3%95%E8%87%AA%E5%AE%9A%E4%B9%89%E6%AF%8F%E4%B8%AAdom%E8%8A%82%E7%82%B9%E5%9C%A8%E5%8E%9F%E6%9D%A5%E7%9A%84%E8%8A%82%E7%82%B9%E5%90%8E%E9%9D%A2%E5%8A%A0%E4%B8%80%E4%BA%9Bdiv%E5%86%8D%E5%88%A9%E7%94%A8css%E6%A0%B7%E5%BC%8F%E4%BD%BF%E5%AE%83%E7%9C%8B%E8%B5%B7%E6%9D%A5%E5%83%8F%E4%B8%AA%E8%A1%A8%E6%A0%BC">&#x539F;&#x7406;&#x5F88;&#x7B80;&#x5355;&#xFF1A;&#x5229;&#x7528;zTree&#x7684;addDiyDom&#x65B9;&#x6CD5;&#xFF0C;&#x81EA;&#x5B9A;&#x4E49;&#x6BCF;&#x4E2A;DOM&#x8282;&#x70B9;&#xFF0C;&#x5728;&#x539F;&#x6765;&#x7684;&#x8282;&#x70B9;&#x540E;&#x9762;&#x52A0;&#x4E00;&#x4E9B;div&#xFF0C;&#x518D;&#x5229;&#x7528;css&#x6837;&#x5F0F;&#x4F7F;&#x5B83;&#x770B;&#x8D77;&#x6765;&#x50CF;&#x4E2A;&#x8868;&#x683C;&#x3002;</h3>

<p>&#x9700;&#x8981;&#x5F15;&#x5165;&#x7684;&#x6587;&#x4EF6;</p>
<blockquote>
<p><a href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css">https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css</a><br>
<a href="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js</a><br>
<a href="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js">https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js</a></p>
</blockquote>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/*css&#x6837;&#x5F0F;&#x4EE3;&#x7801;*/</span>
    <span class="token selector"><span class="token class">.ztree</span></span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token hexcode">#CDD6D5</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> li a</span> <span class="token punctuation">{</span>
        <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> li &gt; a</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> li &gt; a,
    <span class="token class">.ztree</span> li a<span class="token class">.curSelectedNode</span></span> <span class="token punctuation">{</span>
        <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">cursor</span><span class="token punctuation">:</span> default<span class="token punctuation">;</span>
        <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> li ul</span> <span class="token punctuation">{</span>
        <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token unit">px</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> div<span class="token class">.diy</span> span</span> <span class="token punctuation">{</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> div<span class="token class">.diy</span></span> <span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">%</span><span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> dotted <span class="token hexcode">#ccc</span><span class="token punctuation">;</span>
        <span class="token property">border-left</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eeeeee</span><span class="token punctuation">;</span>
        <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
        <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#6c6c6c</span><span class="token punctuation">;</span>
        <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;SimSun&quot;</span><span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> div<span class="token class">.diy</span><span class="token pseudo-class">:first-child</span></span> <span class="token punctuation">{</span>
        <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">border-left</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> <span class="token class">.head</span></span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#5787EB</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.ztree</span> <span class="token class">.head</span> div<span class="token class">.diy</span></span> <span class="token punctuation">{</span>
        <span class="token property">border-top</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">border-right</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#CDD2D4</span><span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
        <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

</pre><pre data-role="codeBlock" data-info="javascript" class="language-javascript">  <span class="token keyword">var</span> zTreeNodes<span class="token punctuation">;</span>
    <span class="token keyword">var</span> setting <span class="token operator">=</span> <span class="token punctuation">{</span>
        view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            showLine<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            showIcon<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            addDiyDom<span class="token punctuation">:</span> addDiyDom
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            simpleData<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                enable<span class="token punctuation">:</span> <span class="token boolean">true</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">/***&#x81EA;&#x5B9A;&#x4E49;DOM&#x8282;&#x70B9; */</span>
    <span class="token keyword">function</span> <span class="token function">addDiyDom</span><span class="token punctuation">(</span><span class="token parameter">treeId<span class="token punctuation">,</span> treeNode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> spaceWidth <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> liObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#&quot;</span> <span class="token operator">+</span> treeNode<span class="token punctuation">.</span>tId<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> aObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#&quot;</span> <span class="token operator">+</span> treeNode<span class="token punctuation">.</span>tId <span class="token operator">+</span> <span class="token string">&quot;_a&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> switchObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#&quot;</span> <span class="token operator">+</span> treeNode<span class="token punctuation">.</span>tId <span class="token operator">+</span> <span class="token string">&quot;_switch&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> icoObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#&quot;</span> <span class="token operator">+</span> treeNode<span class="token punctuation">.</span>tId <span class="token operator">+</span> <span class="token string">&quot;_ico&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> spanObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#&quot;</span> <span class="token operator">+</span> treeNode<span class="token punctuation">.</span>tId <span class="token operator">+</span> <span class="token string">&quot;_span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        aObj<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&apos;title&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        aObj<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&apos;&lt;div class=&quot;diy swich&quot;&gt;&lt;/div&gt;&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> div <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>liObj<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&apos;div&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        switchObj<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        spanObj<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        icoObj<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        div<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>switchObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        div<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>spanObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> spaceStr <span class="token operator">=</span> <span class="token string">&quot;&lt;span style=&apos;height:1px;display: inline-block;width:&quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>spaceWidth <span class="token operator">*</span> treeNode<span class="token punctuation">.</span>level<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;px&apos;&gt;&lt;/span&gt;&quot;</span><span class="token punctuation">;</span>
        switchObj<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span>spaceStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> editStr <span class="token operator">=</span> <span class="token string">&apos;&apos;</span><span class="token punctuation">;</span>
        editStr <span class="token operator">+=</span> <span class="token string">&apos;&lt;div class=&quot;diy&quot;&gt;&apos;</span><span class="token punctuation">;</span>
        editStr <span class="token operator">+=</span> <span class="token string">&apos;&lt;a href=&quot;active.view.html?actId=&quot;&gt;&#x589E;&#x52A0;&#x5B50;&#x90E8;&#x95E8;&lt;/a&gt;&apos;</span><span class="token punctuation">;</span>
        editStr <span class="token operator">+=</span> <span class="token string">&apos;&lt;span class=&quot;vertical-line&quot;&gt;|&lt;/span&gt;&lt;a href=&quot;active.view.html?actId=&quot;&gt;&#x7F16;&#x8F91;&#x90E8;&#x95E8;&lt;/a&gt;&apos;</span><span class="token punctuation">;</span>
        editStr <span class="token operator">+=</span> <span class="token string">&apos;&lt;span class=&quot;vertical-line&quot;&gt;|&lt;/span&gt;&lt;a href=&quot;active.view.html?actId=&quot;&gt;&#x5220;&#x9664;&#x90E8;&#x95E8;&lt;/a&gt;&apos;</span><span class="token punctuation">;</span>
        editStr <span class="token operator">+=</span> <span class="token string">&apos;&lt;/div&gt;&apos;</span><span class="token punctuation">;</span>
        aObj<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>editStr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/***&#x67E5;&#x8BE2;&#x6570;&#x636E;*/</span>
    <span class="token keyword">function</span> <span class="token function">query</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token string">&quot;CONTACT_USER&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x5F20;&#x4E09;&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;CONTACT_PHONE&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;18888888888&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;addFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">&quot;ORG_ID&quot;</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;o1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;pId&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;onull&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;open&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x5355;&#x4F4D;1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;modFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">&quot;CORP_CAT&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x6E2F;&#x53E3;-&#x5929;&#x7136;&#x6DB2;&#x5316;&#x6C14;,&#x6E2F;&#x53E3;-&#x6DB2;&#x5316;&#x77F3;&#x6CB9;&#x6C14;&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;TYPE&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;org&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;delFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">&quot;CONTACT_USER&quot;</span><span class="token punctuation">:</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token string">&quot;SECTOR_NAME&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x90E8;&#x95E8;1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;addFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">&quot;CONTACT_PHONE&quot;</span><span class="token punctuation">:</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token string">&quot;SECTOR_ID&quot;</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">&quot;ORG_ID&quot;</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;s1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;pId&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;o1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x90E8;&#x95E8;1&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;modFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">&quot;PARENT_ID&quot;</span><span class="token punctuation">:</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token string">&quot;CORP_CAT&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;&#x6E2F;&#x53E3;-&#x5929;&#x7136;&#x6DB2;&#x5316;&#x6C14;&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;TYPE&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;sector&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;delFlag&quot;</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token comment">//&#x521D;&#x59CB;&#x5316;&#x5217;&#x8868;</span>
        zTreeNodes <span class="token operator">=</span> data<span class="token punctuation">;</span>
        <span class="token comment">//&#x521D;&#x59CB;&#x5316;&#x6811;</span>
        $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>zTree<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#dataTree&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> setting<span class="token punctuation">,</span> zTreeNodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//&#x6DFB;&#x52A0;&#x8868;&#x5934;</span>
        <span class="token keyword">var</span> li_head <span class="token operator">=</span> <span class="token string">&apos; &lt;li class=&quot;head&quot;&gt;&lt;a&gt;&lt;div class=&quot;diy&quot;&gt;&#x90E8;&#x95E8;&#x540D;&#x79F0;&lt;/div&gt;&lt;div class=&quot;diy&quot;&gt;&#x64CD;&#x4F5C;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&apos;</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> rows <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#dataTree&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&apos;li&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>rows<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            rows<span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span>li_head<span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#dataTree&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>li_head<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#dataTree&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&apos;&lt;li &gt;&lt;div style=&quot;text-align: center;line-height: 30px;&quot; &gt;&#x65E0;&#x7B26;&#x5408;&#x6761;&#x4EF6;&#x6570;&#x636E;&lt;/div&gt;&lt;/li&gt;&apos;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">query</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dataTree<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>ztree<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre>
      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>